<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>微博</title>
    <style type="text/css">
        .list1 li {
            list-style-type: none;
            border: 2px solid;
        }

        .list1 li:nth-child(1) {
            /*微博列表第一个列表项*/
            border: 1px solid #ccc;
            /*为列表添加边框*/
            border-radius: 6px;
            /*设置列表圆角*/
            box-shadow: 0 1px 1px #ccc;
            /*列表阴影设置*/
        }

        .list1 li:last-child {
            /*  微博列表最后一个列表项*/
            border: 1px solid #ccc;
            /*为列表添加边框*/
            border-radius: 6px;
            /*设置列表圆角*/
            box-shadow: 0 1px 1px #ccc;
            /*列表阴影设置*/
            background: hsla(0, 100%, 60%, 0.5);
            /*设置颜色*/
        }

        /*通过font-face引入外部字体*/
        @font-face {
            font-family: YourWebFontName;
            src: url('ziti/1.TTF');
        }

        .list1 li {
            font-family: 'YourWebFontName';
        }

        .list1 li:last-child {
            /*微博列表最后一个列表项*/
            background: hsla(0, 100%, 60%, 0.5);
            /*设置颜色*/
        }
    </style>

</head>

<body>
    <div id="container">
        <form>
            <input type="text">
            <button type="button">搜索</button>
        </form>
        <div style="display: flex">
            <!--左侧边栏-->
            <article>
                <div class="nav">
                    <div class="nav_left">
                        <ul class="list">
                            <li><a href="">热门</a></li>
                            <li class="nav_li_hover">
                                <a href="">头条</a>
                            </li>
                            <li><a href="">新鲜事</a></li>
                        </ul>
                    </div>
                </div>
            </article>
            <article>
                <div class="nav_main">
                    <!--微博话题栏内容-->
                    <ul class="list1">
                        <li>
                            ＞杨老师， 生日快乐！
                            <br /><img src="img/a1.png" width="100" height="100">
                            张一龙&nbsp;6月3日&nbsp;&nbsp;
                            <img src="img/1.png" width="10" height="10">
                            29468&nbsp;&nbsp;
                            <img src="img/2.png" width="11" height="11">
                            78452&nbsp;&nbsp;
                            <img src="img/3.png" width="11" height="11">
                            47777&nbsp;&nbsp;
                        </li>
                        <li>
                            ＞你好2019&nbsp; &nbsp; 今天是充满童真的一天。
                            <br /><img src="img/a1.png" width="100" height="100">
                            李欣&nbsp;6月3日&nbsp;&nbsp;
                            <img src="img/1.png" width="10" height="10">
                            29468&nbsp;&nbsp;
                            <img src="img/2.png" width="11" height="11">
                            78452&nbsp;&nbsp;
                            <img src="img/3.png" width="11" height="11">
                            47777&nbsp;&nbsp;
                        </li>
                        <li>
                            ＞祝愿即将高考的学子们考出自己理想的成绩～
                            <br /><img src="img/a1.png" width="100" height="100">
                            杨凯&nbsp;6月3日&nbsp;&nbsp;
                            <img src="img/1.png" width="10" height="10">
                            29468&nbsp;&nbsp;
                            <img src="img/2.png" width="11" height="11">
                            78452&nbsp;&nbsp;
                            <img src="img/3.png" width="11" height="11">
                            47777&nbsp;&nbsp;
                        </li>
                        <li>
                            ＞偷偷藏起来，喜欢被同学取笑。
                            <br /><img src="img/a1.png" width="100" height="100">
                            张伟&nbsp;6月3日&nbsp;&nbsp;
                            <img src="img/1.png" width="10" height="10">
                            29468&nbsp;&nbsp;
                            <img src="img/2.png" width="11" height="11">
                            78452&nbsp;&nbsp;
                            <img src="img/3.png" width="11" height="11">
                            47777&nbsp;&nbsp;
                        </li>
                        <li>
                            ＞周一放送一一这位顾客您好，今天想来买点什么？要不要本季度最新到货的~
                            <br /><img src="img/a1.png" width="100" height="100">
                            胡糊&nbsp;6月3日&nbsp;&nbsp;
                            <img src="img/1.png" width="10" height="10">
                            29468&nbsp;&nbsp;
                            <img src="img/2.png" width="11" height="11">
                            78452&nbsp;&nbsp;
                            <img src="img/3.png" width="11" height="11">
                            47777&nbsp;&nbsp;
                            //&nbsp是不间断空格
                        </li>
                    </ul>
                </div>
            </article>
        </div>
    </div>

</body>

</html>